<!DOCTYPE html>
<html>
    <head>
        <title>Progress Bar</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="progressDiv">
            <div id="progressText">Progress</div>
            <svg id="circleContainer" height="360" width="360">
                <circle stroke="#EAF0F6" id="progBarUnder" stroke-width="20" cx="180" cy="180" r="140" fill="transparent"/>
                <circle stroke="#005CFF" id="progBar" stroke-width="20" cx="180" cy="180" r="140" fill="transparent"/>
            </svg>
        </div>
        <div id="inputsDiv">
            <div id="inputs">
                <label class="numInput">
                    <input id="numberInput" type="number" min="0" max="100" name="Value">
                    <label for="numberInput" class="label">Value</label>
                </label>
                <label class="togInput">
                    <input id="animateToggle" type="checkbox">
                    <span></span>
                    <label for="animateToggle"  class="label" name="Animate">Animate</label>
                </label>
                <label class="togInput">
                    <input id="hideToggle" type="checkbox">
                    <span></span>
                    <label for="hideToggle"  class="label" name="Hide">Hide</label>
                </label>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>